<template>
	<view class="login" >
		<navbar mode="justText" title="登录"></navbar>
		<view class="body">
			<view class="logo-box">
				<image class="logo" src="/static/logo_text.png" mode="aspectFit"></image>
			</view>
			<view class="login-inputs">
				<my-input class="input"
				text="请输入手机号码" borderColor="#d9d9d9" :widthPercent="75" mode="number" :height="40" checkColor="#2fb6ff" @input="inputPhone"></my-input>
				<my-input class="input"
				text="请输入密码" borderColor="#d9d9d9" :widthPercent="75" mode="text" :password="true" :height="40" checkColor="#2fb6ff" @input="inputPassword"></my-input>
			</view>
			<button class="push-bottom" @click="login">登录</button>
			<text style="margin-top: 10rpx;color: #2fb6ff;font-size: 28rpx;" @click="toRegister">没有账号？点击注册</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:"",
				password:"",
				verify:function(){
					if(this.phone === ""){
						return {
							msg:"手机号不能为空",
							suc:false
						}
					}else if(this.phone.length != 11){
						return {
							msg:"请输入11位手机号",
							suc:false
						}
					}else if(this.password === ""){
						return {
							msg:"密码不能为空",
							suc:false
						}
					}else{
						return {
							suc:true,
							data:{
								phone:this.phone,
								password:this.password,
							}
						}
					}
				}
			};
		},
		methods:{
			async login(){
				const verify = this.verify() //调用verify函数进行用户输入的验证
				if(verify.suc){
					uni.showLoading({})	//弹出加载中提示框
					await this.$postRequst("user/login",verify.data).then(res=>{
						uni.hideLoading()	//关闭提示框
						if(res.data.code==200){
							uni.showToast({	//提示用户登陆成功
								title:"登陆成功！"
							})
							uni.clearStorageSync()	//将用户信息存入缓存
							uni.setStorageSync("user",res.data.data[0])
							setTimeout(()=>{	//登陆成功后，在一秒后跳转至首页
								uni.hideToast();
								uni.switchTab({
									url:"../tabber/shop/shop"
								})
							},1000)
						}else if(res.data.code==400){
							console.log("登陆失败");
							uni.showToast({
								title:"登录失败！请检查网络",
								icon:"none"
							})
							uni.hideToast()
						}
					})
				}else{
					uni.showToast({	//如果用户输入的信息不通过，则提示用户
						title:verify.msg,
						icon:"none"
					})
				}
			},
			toRegister(){
				uni.navigateTo({
					url:"../register/register"
				})
			},
			inputPhone(v){
				this.phone = v
			},
			inputPassword(v){
				this.password = v
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		
	}
	.login{
		height: 100%;
		width: 100%;
		//border: 2rpx red solid;
		.body{
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100%;
			width: 100%;
			.login-inputs{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 40rpx;
				width: 100%;
				.input{
					margin-top: 20rpx;
				}
			}
			.push-bottom{
				width: 50%;
				margin-top: 40rpx;
				background-color: $my-main-color;
				color: #fff;
			}
			.logo-box{
				width: 100%;
				height: 35%;
				background-color: $my-main-color;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				.logo{
					width: 100%;
					height: 100%;
					
					//border-radius: 100rpx;
					position: relative;
					top: -50rpx;
					//border: 4rpx #fff solid;
				}
			}
		}
	}
</style>
